<template>
  <h2>computed</h2>
  <p>{{ count }}</p>
  <button @click="add">btn</button>
  <p>{{ doubleCount }}</p>

  <hr />

  <ul>
    <li v-for="item in oddList" :key="item">{{ item }}</li>
  </ul>
</template>

<script>
import { ref, computed } from "vue";
export default {
  setup() {
    const count = ref(3);
    const add = () => {
      count.value++;
    };
    const list = ref([1, 2, 3, 4, 5, 6]);

    //todo 计算属性传入一个对调函数，并且得到一个返回值
    const doubleCount = computed(() => {
      return count.value * 2;
    });
    const oddList = computed(() => list.value.filter((item) => item % 2));

    return { count, add, doubleCount, oddList };
  },
};
</script>
